<template>
  <div class="settingpaypassword">
    <van-nav-bar
      @click-left="$router.back()"
      left-arrow
      title="设置支付密码"
      fixed
    ></van-nav-bar>
    <div class="main">
      <van-field
        v-show="$store.state.userInfo.paymentCode == 'T'"
        type="password"
        v-model.number="oldPaymentCode"
        clearable
        :maxlength="6"
        :formatter="formatter"
        label="原支付密码"
        placeholder="请输入原支付密码"
      />
      <van-field
        type="password"
        v-model.number="password"
        clearable
        :maxlength="6"
        :formatter="formatter"
        label="支付密码"
        placeholder="请输入支付密码"
      />
      <van-field
        v-model.number="phone"
        type="number"
        clearable
        label="手机号"
        placeholder="请输入手机号"
      />
      <van-field
        v-model="code"
        type="number"
        center
        clearable
        label="手机验证码"
        placeholder="请输入手机验证码"
        use-button-slot
      >
        <div
          v-if="showTime === null"
          class="codebtn"
          @click="send"
          slot="button"
        >
          获取验证码
        </div>
        <div v-else class="codebtn" slot="button">
          {{ showTime }}
        </div>
      </van-field>
    </div>
    <div class="contents-btn" @click="save">保存</div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      oldPaymentCode: "",
      password: "",
      phone: "",
      code: "",
      showTime: null,
    };
  },
  watch: {
    ["cardNumber"](val) {
      this.$nextTick(() => {
        this.cardNumber = val.replace(/\s/g, "").replace(/....(?!$)/g, "$& ");
      });
    },
  },
  created() {
    document.querySelector("html").style.backgroundColor = "#f3f5f7";
    document.querySelector("body").style.backgroundColor = "#f3f5f7";
  },
  methods: {
    formatter(value) {
      // 过滤输入的非数字
      return value.replace(/[^\d]/g, "");
    },
    // 保存
    save() {
      if (
        this.$store.state.userInfo.paymentCode == "T" &&
        this.oldPaymentCode == ""
      ) {
        this.$toast("请输入支付密码");
        return;
      }
      if (this.password == "") {
        this.$toast("请输入支付密码");
        return;
      } else if (this.phone == "") {
        this.$toast("请输入手机号");
        return;
      } else if (this.code == "") {
        this.$toast("请输入验证码");
        return;
      }
      if (
        this.$store.state.userInfo.paymentCode == "T" &&
        this.oldPaymentCode.toString().length != 6
      ) {
        return this.$toast("请输入6位原支付密码");
      }
      if (this.password.toString().length != 6) {
        return this.$toast("请输入6位支付密码");
      }
      let obj = {
        paymentCode: this.password,
        phone: this.phone,
        customerId: this.$store.state.userInfo.id,
        code: this.code,
      };
      if (this.$store.state.userInfo.paymentCode == "T") {
        obj.oldPaymentCode = this.oldPaymentCode;
      }
      this.$api.setPaymentCode(obj).then((res) => {
        if (res.code == 0) {
          this.$toast("设置成功");
          //返回创建页面
          if (this.$route.query.from) {
            return this.$router.push("/" + this.$route.query.from);
          }
          this.$router.push("/personal");
        } else {
          this.$toast(res.msg);
        }
      });
    },
    // 倒计时显示处理
    countDownText(s) {
      this.showTime = `${s}s后重新获取`;
    },
    // 倒计时 60秒 不需要很精准
    countDown(times) {
      const self = this;
      // 时间间隔 1秒
      const interval = 1000;
      let count = 0;
      self.timeCounter = setTimeout(countDownStart, interval);
      function countDownStart() {
        if (self.timeCounter == null) {
          return false;
        }
        count++;
        self.countDownText(times - count + 1);
        if (count > times) {
          clearTimeout(self.timeCounter);
          self.showTime = null;
        } else {
          self.timeCounter = setTimeout(countDownStart, interval);
        }
      }
    },
    send() {
      if (this.phone == "") {
        this.$toast("请输入手机号");
        return;
      } else {
        this.countDown(60);
        this.$api.getCode({ phone: this.phone }).then((res) => {
          if (res.code == 0) {
            this.$toast("验证码发送成功，请查收！");
          } else {
            this.$toast("请重新发送");
          }
        });
      }
    },
  },
};
</script>
<style lang="less" scoped>
.main {
  padding-top: 46px;
}
.codebtn {
  width: 100px;
  height: 30px;
  opacity: 1;
  border: 1px solid #0264d1;
  border-radius: 25px;
  text-align: center;
  line-height: 30px;
  color: #0264d1;
}
.contents-btn {
  position: fixed;
  left: 37.5px;
  bottom: 100px;
  width: 80%;
  height: 40px;
  opacity: 1;
  background: #477fe6;
  border-radius: 41px;
  text-align: center;
  line-height: 40px;
  color: #ffffff;
}
</style>